// 品牌列表组件

const component_brand_link = `
<div>
    <!-- 品牌超链接区 -->
    <div class="wide_link border-editable" @click="setLeftRightLinks">
        <div class="card" v-for="item in brandArray" :key="item.brand_id">
            <el-image fit="contain" :src="item.image_url_real">
                <div slot="error" class="image-slot"></div>
            </el-image>
        </div>
        <div class="card" v-if="!brandArray.length" v-for="item in 8" :key="item">
            <el-image fit="contain">
                <div slot="error" class="image-slot"></div>
            </el-image>
        </div>
    </div>
    
    <!-- 选择左右选择品牌弹窗 -->
    <el-dialog title="选择展示品牌" top="25vh" :visible.sync="dialogVisible" width="45%" :modal-append-to-body="false">
        <el-table :data="brandPage.tableData" row-key="brand_id" reserve-selection :max-height="400" @select="handleBrandSelect" @select-all="handleBrandSelect" tooltip-effect="dark" style="width: 100%">
            <el-table-column type="selection" reserve-selection prop="selected" width="55"></el-table-column>
            <el-table-column prop="brand_name" label="品牌名"></el-table-column>
            <el-table-column prop="image_url_real" label="品牌LOGO">
                <template slot-scope="slot">
                    <el-image style="width: 80px; height: 30px;" :src="slot.row.image_url_real" fit="contain" />
                </template>
            </el-table-column>
        </el-table>
        <el-pagination :current-page.sync="brandPage.currentPage" :total="brandPage.total" @current-change="getBrandPageList" style="text-align: right;margin-top: 10px;" background :page-size="8" layout="prev, pager, next"
            prev-text="上一页" next-text="下一页">
        </el-pagination>

        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false" size="small">确 定</el-button>
        </span>
    </el-dialog>
</div>
`

Vue.component('brand-link', {
    props: {
        brandids: '',
    },
    data: function () {
        return {
            brandArray: [],
            dialogVisible: false,
            // 产品选择弹窗配置
            brandPage: {
                currentPage: 1,
                total: 8,
                tableData: [],
            },
        }
    },
    created: function () {
        this.getBrandPageList()
    },
    mounted() { },
    methods: {
        setLeftRightLinks() {
            this.dialogVisible = true
        },
        getBrandList() {
            if (this.brandids && this.brandids.length > 0) {
                const that = this
                $.ajax({
                    url: ns.url('admin/pc/getBrandList'),
                    data: { brand_ids: that.brandids },
                    type: 'POST',
                    dataType: 'JSON',
                    success: function (res) {
                        that.brandArray = res.data.map(item => {
                            item.image_url_real = ns.img(item.image_url)
                            return item
                        })
                    },
                    error: function (err) {
                        that.loading = false
                    },
                })
            }
        },
        // 品牌选择改变
        handleBrandSelect(selection, row) {
            const that = this
            // 全选或取消全选操作
            if (!row) {
                // 取消全选
                if (selection.length == 0) {
                    that.brandPage.tableData.forEach(item => {
                        var tmpIndex = that.brandArray.findIndex(brand => {
                            return brand.brand_id == item.brand_id
                        })
                        if (tmpIndex != -1) {
                            that.brandArray.splice(tmpIndex, 1)
                        }
                    })

                    that.emitChangeEvent()
                } else {
                    // 全选
                    selection.forEach(item => {
                        var tmpIndex = that.brandArray.findIndex(brand => {
                            return brand.brand_id == item.brand_id
                        })
                        if (tmpIndex == -1) {
                            that.brandArray.push(item)
                        }
                    })

                    that.emitChangeEvent()
                }
            } else {
                // 单行选择
                var tmpIndex = selection.indexOf(row)
                var index = that.brandArray.findIndex(brand => {
                    return brand.brand_id == row.brand_id
                })
                // 取消选择操作
                if (tmpIndex == -1 && index != -1) {
                    that.brandArray.splice(index, 1)
                }
                // 添加选择操作
                if (tmpIndex != -1 && index == -1) {
                    that.brandArray.push(row)
                }

                that.emitChangeEvent()
            }
        },
        // 获取品牌分页列表
        getBrandPageList() {
            const that = this
            $.ajax({
                url: ns.url('admin/goodsbrand/lists'),
                data: { page_size: 8, page: that.brandPage.currentPage },
                type: 'POST',
                dataType: 'JSON',
                success: function (res) {
                    if (res.code == 0) {
                        res.data.list.forEach(item => {
                            const tmpIndex = that.brandArray.findIndex(brand => {
                                return brand.brand_id == item.brand_id
                            })
                            item.image_url_real = ns.img(item.image_url)
                        })
                        that.brandPage.tableData = res.data.list
                        that.brandPage.total = res.data.count
                    } else that.brandArray = []
                    that.loading = false
                },
                error: function (err) {
                    that.loading = false
                },
            })
        },

        emitChangeEvent() {
            const list = this.brandArray.map(item => {
                return item.brand_id
            })

            this.$emit('change', list.toString())
        },
    },
    watch: {
        brandids: function (curr) {
            this.getBrandList()
        },
    },
    template: component_brand_link,
})
